<!-- 缴费列表 -->
<template>
	<view>
		<view class="no-warpper" v-if="isLong">
			<view v-if="hasInfo">
				<view class="scroll-box">
					<view class="nl-shadow-box card-box" v-for="(feeOrder,index) in list" :key="index">
						<view class="nl-flex-list title">
							<view><text selectable="true">{{feeOrder.feeOrderId}}</text></view>
							<text selectable="true" style="color:#1585FC">{{feeOrder.createTime}}</text>
						</view>
						
						<view class="nl-flex-list-top">
							<view class="item">
								<view>收费对象</view>
								<text>：</text>
								<view>{{feeOrder.list[0].payerObjName}}</view>
							</view>
							<view class="item">
								<view>金额总计</view>
								<text>：</text>
								<view>{{feeOrder.total}} 元</view>
							</view>
						</view>
						
						<view class="nl-flex-list" v-for="(item,zindex) in feeOrder.list" :key="index">
							<view class="content">
								<view class="item">
									<view>费用类型</view>
									<text>：</text>
									<view>{{item.feeName}}</view>
								</view>
								<view class="item">
									<view>收费状态</view>
									<text>：</text>
									<view>{{item.feeStateName}}</view>
								</view>
								<view class="item">
									<view>审核状态</view>
									<text>：</text>
									<view>{{item.auditStateName}}</view>
								</view>
								<view class="item">
									<view>创建时间</view>
									<text>：</text>
									<view>{{item.createTime}}</view>
								</view>
								<view class="item">
									<view>开始时间</view>
									<text>：</text>
									<view>{{item.startTime}}</view>
								</view>
								<view class="item">
									<view>结束时间</view>
									<text>：</text>
									<view>{{item.endTime}}</view>
								</view>
								<view class="item">
									<view>应收金额</view>
									<text>：</text>
									<view>{{item.receivableAmount}} 元</view>
								</view>
								<view class="item">
									<view>实收金额</view>
									<text>：</text>
									<view>{{item.receivedAmount}} 元</view>
								</view>
								<view class="item">
									<view>缴费方式</view>
									<text>：</text>
									<view>{{item.primeRateName}}</view>
								</view>
								<view class="item">
									<view>备注</view>
									<text>：</text>
									<view>{{item.remark}}</view>
								</view>
								
							</view>
						</view>
						
					</view>
					
					<u-loadmore :status="status" />
				</view>
			</view>
			<!-- 无数据 渲染缺省图 -->
			<view v-if="hasInfo == false">
				<noData :noDataText="noDataText"></noData>
			</view>
		</view>

		<view v-else>
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>
	</view>
</template>

<script>
	import {
		queryPayFeeList
	} from '@/api/query'
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				pamras:{},	// 用来请求缴费列表
				listBox: [], // 避免上拉刷新时，页面出现空白
				list: [],
				
				page: 1,
				records: 0,
				status: 'loadmore',

				isLong: false, // 是否加载完成
				hasNet: true, // 是否有网络
				hasInfo: '', // 是否有数据
				noDataText: '暂无数据~',
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad(option) {
			let that = this
			that.pamras = JSON.parse(option.pamras)
			that.pamras['row'] = 10
			that.pamras['communityId'] = this.userCommunity.communityId
			
			that.page = 1
			that.records = 0
			that.listBox = []
			that.queryPayFeeList(1)
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.records = 0
			this.listBox = []
			this.queryPayFeeList(1)
		},
		// 上拉加载
		onReachBottom(){
			console.log('页面触底了')
			if (this.status == 'loading') { // 防止多次触发
			
			} else {
				this.status = 'loading'
				if (this.page <= this.records) {
					this.queryPayFeeList(this.page)
				} else {
					this.status = 'nomore'
				}
			}
		},
		methods: {
			/**
			 * 获取缴费列表
			 */
			queryPayFeeList(page) {
				let that = this
				that.pamras['page'] = page
				console.log('pamras', that.pamras)
				queryPayFeeList(that.pamras).then((res) => {
					console.log('获取列表', res)

					if (res.records == 0) { //暂无数据
						that.hasInfo = false
						that.isLong = true
						uni.hideLoading()
						uni.stopPullDownRefresh()
						return
					}

					that.records = res.records
					if (that.records == that.page) {
						that.status = 'nomore'
					} else {
						that.status = 'loadmore'
					}
					that.page++
					uni.stopPullDownRefresh()
					for (let i of res.data) {
						that.listBox.push(i)
					}
					that.list = that.listBox
					
					that.isLong = true
					that.hasInfo = true

				}).catch(function(reason) {
					uni.stopPullDownRefresh()
					// 处理网络错误
					that.hasNet = false
					that.isLong = false
				})
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.page = 1
				this.records = 0
				this.listBox = []
				this.queryPayFeeList(1)
			}
		}
	}
</script>

<style lang="scss">
	.card-box {
		.content {
			margin-bottom: 24rpx;
		}
		
		.nl-flex-list{
			border-bottom: 2rpx solid #f8f8f8;
		}
		
		.nl-flex-list-top{
			padding: 12rpx 24rpx 0;
			.item{
				display: flex;
				padding: 0 24rpx;
				align-items: center;
				justify-content: flex-start;
				font-size: 30rpx;
				margin-bottom: 12rpx;
				
				view:nth-child(1){
					width: 136rpx;
					text-align-last: justify;
					color: #AFAFAF;
				}
				
				text{
					color: #AFAFAF;
				}
				
				view:last-of-type {
				    flex: 1;
				}
			}
		}
	}

	.scroll-box {
		width: 100%;
		padding-bottom: 32rpx;
	}
</style>
